<template>
    <a class="slot-wrapper" :href="itemUrl" target="_blank">
        <div class="inner-work">
            <div class="workTiny">
                <p class="w-item"><slot name="workItem">产品经理</slot></p>
                <p @mouseenter="enter" @mouseleave="leave"><i class="el-icon-share"></i></p>
            </div>
            <div class="money"><slot name="money">20-35K</slot></div>
        </div>

        <div class="requires">
            <p class="a-address"><slot name="address">北京</slot></p>|
            <p class="e-exper"><slot name="experience">3-5年</slot></p>|
            <p class="e-educ"><slot name="education">本科</slot></p>
        </div>
        <div class="inter-box"></div>
        <div class="information">
            <p class="l-logo"><slot name="logo">图片</slot></p>
            <p class="c-com"><slot name="company">大智慧</slot></p>
            <p class="i-int"><slot name="type">互联网</slot></p><span>|</span>
            <p class="l-level"><slot name="level">已上市</slot></p>
        </div>
        <div ref="acp" class="isAction"><img src="../../../../assets/icon/03.png" alt=""><slot name="QRcode"></slot></div>
    </a>
</template>

<script>
    export default {
        name: "itemWork",
        props:{
            itemUrl: String
        },
        data(){
            return{

            }
        },
        methods:{
            enter(){
                var acps = this.$refs.acp;
                acps.style.width = '100px';
                acps.style.height = '100px';
                acps.style.backgroundColor = '#5DD5C8';
                acps.style.left = '50px;';
                acps.style.opacity = 1;
            },
            leave(){
                var acps = this.$refs.acp;
                acps.style.width = '0px';
                acps.style.height = '0px';
                acps.style.opacity = 0;
            }
        }
    }
</script>

<style scoped lang="less">
    .slot-wrapper{
        width: 390px;
        height: 130px;
        display: flex;
        flex-flow: column;
        background-color: white;
        font-size: 12px;
        color: #9FA3AF;
    }
    .slot-wrapper:hover{
        cursor: pointer;
        .w-item{
            color: #5DD5C8;
        }
    }
    .inner-work{
        display: flex;
        justify-content: space-between;
        margin-left: 15px;
        margin-right: 15px;
    }
    .workTiny{
        display: flex;
        margin-top: 5px;
        .w-item{
            font-size: 13px;
            color: #61687C;
        }
    }
    .requires{
        display: flex;
        margin-top: 8px;
        margin-left: 15px;
        .a-address{
            margin-right: 5px;
        }
        .e-exper{
            margin-left: 5px;
            margin-right: 5px;
        }
        .e-educ{
            margin-left: 5px;
        }
    }
    .information{
        display: flex;
        margin-top: 50px;
        margin-left: 15px;
        align-items: center;
        .l-logo{
            margin-right: 15px;
            width: 20px;
        }
        .c-com{
            margin-right: 5px;
        }
        .i-int{
            margin-right: 5px;
        }
        .l-level{
            margin-left: 5px;
        }
    }
    .money{
        margin-right: 15px;
        color: #FD7240;
    }
    img{
        width: 30px;
        height: 30px;
    }
    .isAction{
        position: absolute;
        z-index: 20;
        opacity: 0;
        transform:translate3d(150px,0,0);
        img{
            width: 100px;
            height: 100px;
        }
    }
    a{
        text-decoration: none;
    }
</style>